<!-- 推荐 -->
<template>
<div class="container_recommends">
    <!-- 列表 -->
    <div class="main">
        <van-tabs @click="changeData" v-show="recommendData.length>1">
            <van-tab v-for="(item,index) in recommendData" :title="'第'+parseInt(index+1)+'天'" :key="index" />
        </van-tabs>
        <div v-show="type == 'f'">
            <div class="title">早餐</div>
            <div class="list" v-for="item in currentCecommendData" v-if="item.planDayTime == 1">
                <div class="food_item" v-for="obj in item.foodPlanDetails">
                    <img :src="obj.foodIconUrl" alt="">
                    <div class="food_des">
                        <div>{{ obj.foodName }}</div>
                        <div>{{ obj.trophy }}千卡/{{ item.foodWeight }}g</div>
                    </div>
                </div>
            </div>
            <div class="title">午餐</div>
            <div class="list" v-for="item in currentCecommendData" v-if="item.planDayTime == 2">
                <div class="food_item" v-for="obj in item.foodPlanDetails">
                    <img :src="obj.foodIconUrl" alt="">
                    <div class="food_des">
                        <div>{{ obj.foodName }}</div>
                        <div>{{ obj.trophy }}千卡/{{ item.foodWeight }}g</div>
                    </div>
                </div>
            </div>
            <div class="title">晚餐</div>
            <div class="list" v-for="item in currentCecommendData" v-if="item.planDayTime == 3">
                <div class="food_item" v-for="obj in item.foodPlanDetails">
                    <img :src="obj.foodIconUrl" alt="">
                    <div class="food_des">
                        <div>{{ obj.foodName }}</div>
                        <div>{{ obj.trophy }}千卡/{{ item.foodWeight }}g</div>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="type == 's'">
            <div class="title">推荐运动项目</div>
            <div class="list">
                <div class="food_item sport" v-for="(item,index) in currentCecommendData">
                    <img :src="item.sportIconRrl" alt="">
                    <div>{{ item.sportName }}</div>
                    <div>{{ item.trophy }}千卡/{{ item.duration }}分钟</div>
                </div>
            </div>
        </div>
    </div>
    <div class="cancel" style="text-align: center;padding: 1.25rem; color: #666;text-decoration: underline;font-size: 1rem;" @click="$router.go(-1)">我知道啦</div>

</div>
</template>

<script>
export default {
    metaInfo() {
        return {
            title: '推荐'
        }
    },
    name: 'Recommends',
    data() {
        return {
            userInfo: {},
            type: '',
            recommendData: [],
            currentCecommendData: []
        }
    },
    components: {},
    mounted() {
        this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.type = this.$route.query.type;
        this.initData();
    },
    methods: {
        initData() {
            // 数据列表初始化
            if (this.type == 's') {
                this.recommendData = JSON.parse(sessionStorage.getItem('recommendSport'))
                this.currentCecommendData = this.recommendData[0].sportPlanDetails
            } else {
                let foodData = JSON.parse(sessionStorage.getItem('recommendFood'))
                let foodFormat = {}
                foodData.forEach(element => {
                    if (foodFormat[element.planDate]) {
                        foodFormat[element.planDate].push(element)
                    } else {
                        foodFormat[element.planDate] = [element]
                    }
                });
                for (let key in foodFormat) {
                    this.recommendData.push(foodFormat[key])
                }
                console.log(JSON.stringify(this.recommendData))
                this.currentCecommendData = this.recommendData[0]
            }
        },
        changeData(index, title) {
            if (this.type == 's') {
                this.currentCecommendData = this.recommendData[index].sportPlanDetails
            } else {
                this.currentCecommendData = this.recommendData[index]
            }

        },

    }
}
</script>

<style lang="less">
@import '../../assets/css/common.less';

.container_recommends {
    background: url(../../assets/img/recommend/top_bg3.jpeg) no-repeat;
    background-size: 100%;
    padding-top: 13.75rem;

    .main {
        border-radius: 1.25rem;
        // background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255,247,147,0.4));
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(194, 251, 244, 0.4));
        padding-top: 0;
        padding-bottom: 1.25rem;
    }

    .title {
        font-size: 0.875rem;
        color: #666;
        display: flex;
        justify-content: space-between;
        padding: 0.625rem 1.125rem;
        flex-shrink: 1;
    }

    .list {

        display: flex;
        justify-content: left;
        flex-wrap: wrap;

        .food_item {
            width: 36%;
            padding: 1.25rem 3%;
            margin: 0.625rem 4%;
            border-radius: 0.5rem;
            background-color: #fff;
            box-shadow: 0.0625rem -0.0625rem 0.25rem 0.0625rem rgba(158, 212, 200, 0.3);
            display: flex;
            justify-content: space-between;

            &.sport {
                width: 80%;
                padding: 1.25rem 5%;
                margin: 1.125rem 5%;

                div {
                    line-height: 3.75rem;
                }
            }

            img {
                width: 3.75rem;
                height: 3.75rem;
            }

            .food_des {

                div {
                    padding: 0.125rem
                }
            }

        }

    }

}
</style>
